import React from 'react';
import cls from 'classnames';
import { DesignerHeader } from './DesignerHeader';
import { DesignerContent } from './DesignerContent';
import { CanvasDomIDContex, DesignerContext, useEngine } from './DesignerHooks';
import './styles.less';
import { DesignerAPI } from './type';

export const TopologyCanvas: React.FC<DesignerAPI.IDesignerProps> = ({
  id,
  canvasIDDom,
  nodeList,
}) => {
  const clsName = 'design';

  const { engine } = useEngine(id);

  /**
   * 将使用的图标的Unicode放在以下方式进行转义，便可以使用
   * 后台返回的字段进行了转义，需要进行反转义
   * @param Unicode
   * @returns
   */
  const returnIconFont = (Unicode: string) => {
    if (Unicode.indexOf('&amp;') !== -1) {
      Unicode = Unicode.replace('&amp;', '&');
    }
    if (Unicode.indexOf('&amp') !== -1) {
      Unicode = Unicode.replace('&amp', '&');
    }
    let icon = eval(
      '("' + `${Unicode}`.replace('&#x', '\\u').replace(';', '') + '")',
    );

    return icon;
  };

  const defaultNode = [
    {
      attrValue: null,
      children: [],
      currentUserID: null,
      dataList: [
        {
          icon: (
            <div
              style={{
                width: 60,
                height: 20,
                borderRadius: 3,
                background: 'rgba(24,144,255,0.5)',
                border: '1px solid #1890ff',
                margin: '5px 0px',
              }}
            ></div>
          ),
          name: '任务',
          pID: '100017031000',
          data: {
            borderRadius: 0.1,
            data: {
              type: '1',
            },
            fillStyle: 'rgba(24,144,255,0.5)',
            font: { color: '#ffffff' },
            // icon: returnIconFont('&#xe612'),
            iconColor: '#5cdbd3',
            iconFamily: 'kettle',
            is3D: true,
            name: 'rectangle',
            paddingBottom: 10,
            paddingLeft: 10,
            paddingRight: 10,
            paddingTop: 10,
            rect: { width: 120, height: 30 },
            strokeStyle: '#1890ff',
            text: '任务',
            z: 10,
            zRotate: 15,
          },
        },
        {
          icon: (
            <div
              style={{
                width: 30,
                height: 30,
                borderRadius: '50%',
                background: 'rgba(30,214,98,0.5)',
                border: '1px solid rgba(30,214,98)',
              }}
            ></div>
          ),
          name: '开始',
          pID: '100017031000',
          data: {
            borderRadius: 0.1,
            data: {
              type: '0',
            },
            fillStyle: 'rgba(30,214,98,0.5)',
            font: { color: '#ffffff' },
            // icon: returnIconFont('&#xe612'),
            iconColor: '#5cdbd3',
            iconFamily: 'kettle',
            is3D: true,
            name: 'circle',
            paddingBottom: 10,
            paddingLeft: 10,
            paddingRight: 10,
            paddingTop: 10,
            rect: { width: 50, height: 50 },
            strokeStyle: 'rgba(30,214,98)',
            text: '开始',
            z: 10,
            zRotate: 15,
          },
        },
        {
          icon: (
            <div
              style={{
                width: 30,
                height: 30,
                borderRadius: '50%',
                background: 'rgba(236,65,65,0.5)',
                border: '1px solid rgba(236,65,65)',
              }}
            ></div>
          ),
          name: '结束',
          pID: '100017031000',
          data: {
            borderRadius: 0.1,
            data: {
              type: '2',
            },
            fillStyle: 'rgba(236,65,65,0.5)',
            font: { color: '#ffffff' },
            // icon: returnIconFont('&#xe612'),
            iconColor: '#5cdbd3',
            iconFamily: 'kettle',
            is3D: true,
            name: 'circle',
            paddingBottom: 10,
            paddingLeft: 10,
            paddingRight: 10,
            paddingTop: 10,
            rect: { width: 50, height: 50 },
            strokeStyle: 'rgba(236,65,65)',
            text: '结束',
            z: 10,
            zRotate: 15,
          },
        },
        {
          icon: (
            <div
              style={{
                width: 20,
                height: 20,
                backgroundColor: 'rgba(114,46,209,0.5)',
                transform: 'rotate(45deg)',
                border: '1px solid rgba(114,46,209)',
              }}
            ></div>
          ),
          name: '分支',
          pID: '100017031000',
          data: {
            borderRadius: 0.1,
            data: {
              type: '3',
            },
            fillStyle: 'rgba(114,46,209,0.5)',
            font: { color: '#ffffff' },
            // icon: returnIconFont('&#xe612'),
            iconColor: '#5cdbd3',
            iconFamily: 'kettle',
            is3D: true,
            name: 'diamond',
            paddingBottom: 10,
            paddingLeft: 10,
            paddingRight: 10,
            paddingTop: 10,
            rect: { width: 120, height: 50 },
            strokeStyle: 'rgba(114,46,209)',
            text: '分支',
            z: 10,
            zRotate: 15,
          },
        },
      ],
      dicIds: null,
      dicTypeIds: null,
      errorMessage: null,
      fontColor: '#d0021b',
      id: '100017031000',
      isDisplay: 1,
      isOpen: 1,
      key: '100017031000',
      name: '业务组件',
    },
  ];

  return (
    <DesignerContext.Provider value={engine}>
      <CanvasDomIDContex.Provider
        value={{
          canvasDomID: canvasIDDom,
        }}
      >
        <div className={cls(`${clsName}-layout`)} id={canvasIDDom}>
          <div className={cls(`${clsName}-header`)}>
            <DesignerHeader />
          </div>
          <div className={cls(`${clsName}-content`)}>
            <DesignerContent
              nodeList={
                nodeList && nodeList?.length > 0 ? nodeList : defaultNode
              }
              designLayoutID={id}
            />
          </div>
        </div>
      </CanvasDomIDContex.Provider>
    </DesignerContext.Provider>
  );
};
